<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>焦点学苑</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="webjars/layui/2.5.6/css/layui.css"
	media="all">
<!-- vue -->
<script type="text/javascript"src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
<!-- axios -->
<script type="text/javascript"src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="webjars/layui/2.5.6/layui.all.js" charset="utf-8"></script>
<script src="js/top.js"></script>
<script src="js/category.js"></script>
</head>

<body>
<div class="head-box">
    <div class="head wrap">
          <div class="logo fl"><a href=""><img src="images/logo.png"></a></div>
          <div class="head-right fr">
              <div class="head-a fr">
                   <div class="hgt fl"><img src="images/hgt.png">
                         <div class="hgt-top">
                             <input type="text" class="hgt-text">
                             
                         </div>
                   </div>
                   <!-- <div class="head-a1 fl"><a href=""><img src="images/tb-a.png"></a></div>
                   <div class="head-a1 fl"><a href=""><img src="images/tb-b.png"></a></div>
                   <div class="head-a3 login-click fl">登录</div>
                   <div class="head-a4 reg-click fl">注册</div> -->
              		
              </div> 
              		<top></top>
              <div class="clearfix"></div>
              <div class="nav fr">
                  <ul>
                       <li><a href="index.html">首页</a></li>
                       <li><a href="">文章</a>
                           <div class="sub-nav">
                                <div class="bich-top"></div>
                                 <div class="bich">
                                     <a href="article.html">服饰</a>
                                     <a href="article.html">美食</a>
                                     <a href="article.html">出行</a>
                                     <a href="article.html">娱乐</a>
                                 </div>
                           
                           </div>
                       </li>
                       <li><a href="community.html">社区</a></li>
                       <li><a href="course.html">课程</a></li>
                       <li><a href="active.html">活动</a></li>
                       <li><a href="contact.html">联系我们</a></li>
                  
                  </ul>
              </div>
              <div class="clearfix"></div>
          </div>
    </div>
</div>

<div class="content">
    <div class="wrap">
         <div class="tsm-height"></div>
         <div class="account">
                 <div class="account-title">账户设置</div>
				<div class="tsm-box">
					<div class="tsm-title">个人资料</div>
					<div class="tsm-a" style="display: block;">
						<div class="layui-form-item">
							<div class="tsm-a2 fl">修改头像：</div>
							<div class="layui-input-block">
								<div class="layui-upload-list">
									<img class="layui-upload-img" id="demo2"
										style="height: 122px; width: 122px; border: 1px solid black">
										<p id="demoText"></p>
								</div>
								<button type="button" class="layui-btn" id="test1" style="background:#ffcc00" >上传图片</button>
							</div>
						</div>
						
						<div class="tsm-a1">
							<div class="tsm-a2 fl">用户名：</div>
							<div class="tsm-a3">
								<input  v-model="user.uname" type="text" class="tsm-text1">
							</div>
						</div>

						<div class="tsm-a1">
							<div class="tsm-a2 fl">性别：</div>
							<div class="tsm-a4">
								<input type="radio" checked="checked" name="Sex" value="男">男
									<span><input type="radio" name="Sex" value="女" />女</span>
							</div>
						</div>

						<div class="tsm-a1">
							<div class="tsm-a2 fl">职业：</div>
							<div class="tsm-a3">
								<input type="text" class="tsm-text1">
							</div>
						</div>

						<div class="tsm-a1">
							<div class="tsm-a2 fl">所在城市：</div>
							<div class="tsm-a3">
								<input type="text" class="tsm-text1">
							</div>
						</div>

						<div class="tsm-a1">
							<div class="tsm-a2 fl">生日：</div>
							<div class="tsm-a3">
								<input v-model="user.ubt" type="text" class="tsm-text1">
							</div>
						</div>
						<div class="tsm-a1">
							<div class="tsm-a2 fl">个人主页：</div>
							<div class="tsm-a3">
								<input type="text" class="tsm-text1">
							</div>
						</div>

						<div class="tsm-a1">
							<div class="tsm-a2 fl">个人主页：</div>
							<div class="tsm-a5">
								<textarea class="tsm-area"></textarea>
							</div>
						</div>
						<br></br>
						<div  class="tsm-href"><input @click.prevent="submit" type="button" class="tsm-btn" value="保存"></div>

					</div>
				</div>
			
				<!--  <div class="tsm-box">
                      <div class="tsm-title">头像修改
                      </div>
                      <div class="tsm-b">
                           <div id="preview" class="fl">
                           												<%=request.getContextPath()%>/images/defaul.jpg
                  <img id="imghead" width=122 height=122 border=0 src='<%=request.getContextPath()%>/images/defaul.jpg'>
                           </div>
                           <div class="tt-put fl">
                                               <input type="file" onchange="previewImage(this)" class="tt-btn"/>
                                               <input type="button" class="tt-btn" value="上传图片"/>
                                               <input type="button" class="tt-b" value="保存图片"></div> 
                      </div>
                 </div> -->
				
				<div class="tsm-box">
                      <div class="tsm-title">邮箱</div>
                      <div class="tsm-a">
                                   <div class="tsm-a1">
                                         <div class="tsm-a2 fl">邮箱：</div>
                                         <div class="tsm-c1">86745328@qq.com</div>
                                   </div>
 
                                   <div class="tsm-a1">
                                         <div class="tsm-a2 fl">新邮箱：</div>
                                         <div class="tsm-a3"><input type="text" class="tsm-text1"></div>
                                   </div>
                                   <div class="tsm-a1">
                                         <div class="tsm-a2 fl">邮箱密码：</div>
                                         <div class="tsm-a3"><input type="text" class="tsm-text1"></div>
                                   </div>
                                   
                                 
                        </div>
                 </div>
                 <div class="tsm-box">
                      <div class="tsm-title">密码
                      </div>
                      <div class="tsm-a">
                                   <div class="tsm-a1">
                                         <div class="tsm-a2 fl">当前密码：</div>
                                         <div class="tsm-a3"><input type="text" class="tsm-text1"  v-model="user.upwd"></div>
                                   </div>
 
                                   <div class="tsm-a1">
                                         <div class="tsm-a2 fl">新密码：</div>
                                         <div class="tsm-a3"><input type="password" class="tsm-text1"  v-model="upwd1"></div>
                                   </div>
                                   <div class="tsm-a1">
                                         <div class="tsm-a2 fl">确认密码：</div>
                                         <div class="tsm-a3"><input type="password" class="tsm-text1" v-model="upwd2"></div>
                                   </div>
                                   
                                 <div  class="tsm-href"><input @click.prevent="submit2" type="button" class="tsm-btn" value="保存"></div>
                        </div>
                        
                 </div>
                 
               <!--   <div class="tsm-box">
                      <div class="tsm-title">关联账户</div>
                      <div class="tsm-a">
                                   <div class="tsm-a1">
                                         <div class="tsm-a2 fl">微信：</div>
                                         <div class="tsm-a3"><input type="text" class="tsm-text1"></div>
                                   </div>
 
                                   <div class="tsm-a1">
                                         <div class="tsm-a2 fl">微博：</div>
                                         <div class="tsm-a3"><input type="text" class="tsm-text1"></div>
                                   </div>
                                   <div class="tsm-a1">
                                         <div class="tsm-a2 fl">QQ：</div>
                                         <div class="tsm-a3"><input type="text" class="tsm-text1"></div>
                                   </div>
                                   
                                 
                        </div>
                 </div> -->
                 
                 
         </div>
    </div>
</div>
<script>
 var v1 = new Vue({
	 el:".content",
 	data:{
 		user:{uname:"",upwd:"",ubt:"",uid:""},
 		ujpg:"",
 		upwd1:"",
 		upwd2:"",
 	},
 	created(){
 		axios.get("getloginUser.s").then(res=>{
			if(res.data!=null){
				console.info(res.data);
				//$("#loginA").hide();
				this.user.uid=res.data.uid;
				
			}
		})
 	},
	 mounted(){
		 
		 //常规使用 - 普通图片上传
		 //构建图片上传的控件
		  layui.upload.render({
		    elem: '#test1'
		    ,url: 'cmupload.s' //改成您自己的上传接口
		    ,done: res=>{
		    	if(res.code==1){
		    		//在方框渲染
		    		demo2.src = res.data;
		    		this.ujpg = res.data;
		    	}
		    }
		  });
		 
		 layui.form.render(); 
		 //layui.form.render('select');
		 //layui事件触发模块
		 layui.form.on('submit(demo1)',data=>{
			 /*  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
			  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
			  console.log(data.field)  *///当前容器的全部表单字段，名值对形式：{name: value}
			  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
	 },
	 methods:{
		 submit(){
		 var params = new URLSearchParams();
		 params.append("uname",this.user.uname);
		 params.append("uid",this.user.uid);
		 params.append("ubt",this.user.ubt);
		 params.append("ujpg",this.ujpg);
		 axios.post("user/update.s",params).then(res=>{
			 	console.info(this.ujpg);
			 	console.info(this.user.uid);
			 	alert(res.data.msg);
			 	console.info("------1---"+res.data);
			 })
		 },
		 submit2(){
			 var params = new URLSearchParams();
			 params.append("upwd1",this.user.upwd);
			 params.append("upwd",this.upwd2);
			 params.append("uid",this.user.uid);
			 if(this.upwd2!=this.upwd1){
				 alert("两次输入的密码不一样!  请重新输入");
			 }else{
				 
			 axios.post("user/updatepwd.s",params).then(res=>{
				 alert(res.data.msg);
				 console.info(this.user.uid);
				 })
			 }
		 },
	}
 })
</script>
<div class="footer">
   <div class="wrap">
      <div class="foot">
            <div class="foot-left fl">
                 <a href="">关于我们</a>
                 <a href="">加入我们</a>
                 <a href="contact.html">联系我们</a>
                 <a href="">媒体采访</a>
            </div>
            <div class="foot-c fl"><a href=""><img src="images/foot-logo.jpg"></a></div>
            <div class="foot-right fr">
                 <a href="">同城活动</a>
                 <a href="">课程资讯</a>
                 <a href="">最新发布</a>
                 <a href="">热门文章</a>
            </div>
       </div> 
       <div class="foot-btm">网页制作by云邦</div>    
   </div>
</div>


<!--登录注册弹窗-->
<div class="mask"></div>
<div class="login">
    <div class="login-title">
        <div class="login-a">登录</div>
        <div class="login-b"></div>
        <div class="login-c close">x</div>
    </div>
    <div class="login-btm">
        <div class="login-d"><input type="text" class="login-text" placeholder="注册时填写的邮箱"></div>
        <div class="login-d"><input type="password" class="login-pas" placeholder="密码"></div>
        <div class="login-d"><input type="button" class="login-btn" placeholder="登录"></div>
        <div class="login-f">
             <a href="">忘记密码</a>
             <span>还没有焦点账号?><a href="javascript:;" class="reg-href">点击注册</a></span>
        </div>
    </div>
</div>

<div class="reg">
    <div class="login-title">
        <div class="login-a">注册</div>
        <div class="login-b"></div>
        <div class="login-c close">x</div>
    </div>
    <div class="login-btm">
        <div class="login-d"><input type="text" class="login-text" placeholder="邮箱/手机号"></div>
        <div class="login-d"><input type="password" class="login-pas" placeholder="密码"></div>
        <div class="login-d"><input type="button" class="login-btn" placeholder="注册"></div>
        <div class="login-f">
             <a href="">忘记密码</a>
        </div>
    </div>
</div>


<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/Action.js"></script>
<script>
$(".tsm-title").click(function(){
	  $(this).toggleClass("tsm-t2").parent().siblings().find(".tsm-title").removeClass("tsm-t2"),
	  $(this).next().slideToggle().parent().siblings().find(".tsm-a").slideUp()
})
</script>

<!--<script type="text/javascript">
                //图片上传预览    IE是用了滤镜。
        function previewImage(file)
        {
          var MAXWIDTH  = 122; 
          var MAXHEIGHT = 122;
          var div = document.getElementById('preview');
          if (file.files && file.files[0])
          {
              div.innerHTML ='<img id=imghead>';
              var img = document.getElementById('imghead');
              img.onload = function(){
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width  =  rect.width;
                img.height =  rect.height;
//                 img.style.marginLeft = rect.left+'px';
                img.style.marginTop = rect.top+'px';
              }
              var reader = new FileReader();
              reader.onload = function(evt){img.src = evt.target.result;}
              reader.readAsDataURL(file.files[0]);
          }
          else //兼容IE
          {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
          }
        }
        function clacImgZoomParam( maxWidth, maxHeight, width, height ){
            var param = {top:0, left:0, width:width, height:height};
            if( width>maxWidth || height>maxHeight )
            {
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;
                 
                if( rateWidth > rateHeight )
                {
                    param.width =  maxWidth;
                    param.height = Math.round(height / rateWidth);
                }else
                {
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }
             
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }
</script> -->
</body>
</html>
